
import * as React from 'react'
import { Tabs } from 'antd-mobile'
import { NavBar, Progress, Button, FlatList } from 'components'
import { formatPriceStr } from '../../methods'
import moment from 'moment'
import { post, NotBean } from '../../../../utils'
import './MySoldList.less'

const colors: string[] = ['#fa4140', '#ff5b28', '#ff7427', '#b224d1', '#ea2888', '#b224d1', '#842aff', '#7d89ff', '#4f96ff', '#15badf', '#09d8bd']
const bgColors: string[] = ['#ffd5d5', '#ffc0ac', '#ffd7bf', '#ffb5da', '#f3baff', '#dbc0ff', '#bfc5ff', '#c2dbff', '#b5f1ff', '#c3ffa9', '#9afff2']
export default class SaleBeans extends React.Component<any, any> {

    public state = {
        tabs: [{
            title: '全部'
        }, {
            title: '未领完',
            field: 'unfinished'
        }, {
            title: '已领完',
            field: 'finished'
        }],
    }

    private index: number = 1
    private type: number

    public render(): JSX.Element {
        const { tabs } = this.state
        const { userBeanSoldListUnsold, userBeanSoldListAll, userBeanSoldListSold } = this.props
        return (
            <div className="mySoldList">
                {/* <div className="receiveHD_filterBg"/> */}
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>我出售的恒豆</div>}
                    fixed={true}
                />
                <Tabs
                    tabs={tabs}
                    swipeable={false}
                    usePaged={false}
                    tabBarActiveTextColor="#fa0000"
                    onTabClick={this.handleTab}
                    prerenderingSiblingsNumber={0}
                    renderTab={(tab: any) => {
                        return tab.title
                    }}
                >
                    <div className="mySoldList_tabs_item">
                        <FlatList
                            ListEmptyComponent={NotBean}

                            data={userBeanSoldListAll}
                            height="100%"
                            renderItem={((data: any, index: number) => {
                                const num = parseInt(this.getSoldPercent(parseInt(data.amount, 10), parseInt(data.amount, 10) - parseInt(data.buy_amount, 10)), 10)
                                return (
                                    <div className="mySoldList_voucher flex" key={index} onClick={() => {this.goToUrl('/My/mySoldListDetail/' + data.id)}}>
                                        <div className={`zhekou flex_center bg_${Math.round(data.discount) + 1}`}>
                                            <div>
                                                <div className="daze"><span className="DINPro">{data.discount}</span>折</div>
                                                <div className="label">恒豆折扣数</div>
                                            </div>
                                        </div>
                                        <div className="flex_1">
                                            <div className="info">
                                                <div className="number">恒豆数量：<span className="DINPro">{formatPriceStr(data.amount)}</span></div>
                                                <div className="jine">折扣金额：<span className="DINPro">¥ {(parseInt(data.amount, 10) * (parseInt(data.discount, 10) / 10)).toFixed(0)}</span></div>
                                                <div className="time">发布时间：{moment(data.create_time).format('YYYY-MM-DD HH:MM')}</div>
                                            </div>
                                        </div>
                                        <div className="pros">
                                            <Progress
                                                className="flex_center"
                                                type="dashboard"
                                                size={52}
                                                value={num}
                                                bgColor={bgColors[Math.round(data.discount)]}
                                                progColor={colors[Math.round(data.discount)]}
                                                extend={<div className="pro" style={{ color: colors[Math.round(data.discount)] }}>
                                                <div className="pro_label">
                                                        {
                                                            // 已抢
                                                            (num === 100) 
                                                            ? '已领完' 
                                                            : '已抢'
                                                        }
                                                    </div>
                                                    <div className="pro_number">
                                                        {
                                                            (num === 100) 
                                                            ? '' 
                                                            : num + '%'
                                                        }
                                                    </div>
                                                </div>}
                                            />
                                            <Button className={`btn btn_${Math.round(data.discount)  + 1}`}>查看详情</Button>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                    <div className="mySoldList_tabs_item">
                        <FlatList
                            ListEmptyComponent={NotBean}
                            data={userBeanSoldListUnsold}
                            height="100%"
                            renderItem={((data: any, index: number) => {
                                const num = parseInt(this.getSoldPercent(parseInt(data.amount, 10), parseInt(data.amount, 10) - parseInt(data.buy_amount, 10)), 10)
                                return (
                                    <div className="mySoldList_voucher flex" key={index} onClick={() => {this.goToUrl('/My/mySoldListDetail/' + data.id)}}>
                                        <div className={`zhekou flex_center bg_${Math.round(data.discount) + 1}`}>
                                            <div>
                                                <div className="daze"><span className="DINPro">{data.discount}</span>折</div>
                                                <div className="label">恒豆折扣数</div>
                                            </div>
                                        </div>
                                        <div className="flex_1">
                                            <div className="info">
                                                <div className="number">恒豆数量：<span className="DINPro">{formatPriceStr(data.amount)}</span></div>
                                                <div className="jine">折扣金额：<span className="DINPro">¥ {parseInt(data.amount, 10) * (parseInt(data.discount, 10) / 10)}</span></div>
                                                <div className="time">发布时间：{moment(data.create_time).format('YYYY-MM-DD HH:MM')}</div>
                                            </div>
                                        </div>
                                        <div className="pros">
                                            <Progress
                                                className="flex_center"
                                                type="dashboard"
                                                size={52}
                                                value={num}
                                                bgColor={bgColors[Math.round(data.discount)]}
                                                progColor={colors[Math.round(data.discount)]}
                                                extend={<div className="pro" style={{ color: colors[Math.round(data.discount)] }}>
                                                <div className="pro_label">
                                                        {
                                                            // 已抢
                                                            (num === 100) 
                                                            ? '已领完' 
                                                            : '已抢'
                                                        }
                                                    </div>
                                                    <div className="pro_number">
                                                        {
                                                            (num === 100) 
                                                            ? '' 
                                                            : num + '%'
                                                        }
                                                    </div>
                                                </div>}
                                            />
                                            <Button className={`btn btn_${Math.round(data.discount)  + 1}`}>查看详情</Button>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                    <div className="mySoldList_tabs_item">
                        <FlatList
                            ListEmptyComponent={NotBean}
                            data={userBeanSoldListSold}
                            height="100%"
                            renderItem={((data: any, index: number) => {
                                const num = parseInt(this.getSoldPercent(parseInt(data.amount, 10), parseInt(data.amount, 10) - parseInt(data.buy_amount, 10)), 10)
                                return (
                                    <div className="mySoldList_voucher flex" key={index} onClick={() => {this.goToUrl('/My/mySoldListDetail/' + data.id)}}>
                                        <div className={`zhekou flex_center bg_${Math.round(data.discount) + 1}`}>
                                            <div>
                                                <div className="daze"><span className="DINPro">{data.discount}</span>折</div>
                                                <div className="label">恒豆折扣数</div>
                                            </div>
                                        </div>
                                        <div className="flex_1">
                                            <div className="info">
                                                <div className="number">恒豆数量：<span className="DINPro">{formatPriceStr(data.amount)}</span></div>
                                                <div className="jine">折扣金额：<span className="DINPro">¥ {parseInt(data.amount, 10) * (parseInt(data.discount, 10) / 10)}</span></div>
                                                <div className="time">发布时间：{moment(data.create_time).format('YYYY-MM-DD HH:MM')}</div>
                                            </div>
                                        </div>
                                        <div className="pros">
                                            <Progress
                                                className="flex_center"
                                                type="dashboard"
                                                size={52}
                                                value={num}
                                                bgColor={bgColors[Math.round(data.discount)]}
                                                progColor={colors[Math.round(data.discount)]}
                                                extend={
                                                <div className="pro" style={{ color: colors[Math.round(data.discount)] }}>
                                                    <div className="pro_label">
                                                        {
                                                            // 已抢
                                                            (num === 100) 
                                                            ? '已领完' 
                                                            : '已抢'
                                                        }
                                                    </div>
                                                    <div className="pro_number">
                                                        {
                                                            (num === 100) 
                                                            ? '' 
                                                            : num + '%'
                                                        }
                                                    </div>
                                                </div>}
                                            />
                                            <Button className={`btn btn_${Math.round(data.discount)  + 1}`}>查看详情</Button>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                </Tabs>
            </div>
        )
    }
    private getSoldPercent = (all: any, buy: any) => {
        if (all === buy) {
            return (100).toString()
        } else if (buy === 0) {
            return (0).toString()
        } else {
            return ((buy / all) * 100).toFixed(1)
        }
    }
    private getData = (fashiLoad: () => void) => {
        const { userInfo, SET_MYUTILS_BEANSSOLDLIST, userBeanSoldListUnsold, userBeanSoldListSold, userBeanSoldListAll } = this.props
        post('beanapi/beanUserReleaseList', {
            userId: userInfo.id,
            page: this.index,
            status: this.type
        }).then((data: any) => {
            if (this.index === 1) {
                SET_MYUTILS_BEANSSOLDLIST(data.data, this.type)
                fashiLoad()
            }  else {
                if (data.data.length) {
                    switch (this.type) {
                        case 1: SET_MYUTILS_BEANSSOLDLIST(userBeanSoldListUnsold.concat(data.data), this.type); break
                        case 2: SET_MYUTILS_BEANSSOLDLIST(userBeanSoldListSold.concat(data.data), this.type); break
                        default: SET_MYUTILS_BEANSSOLDLIST(userBeanSoldListAll.concat(data.data), this.type); break
                    }
                    
                    fashiLoad()
                }
            }
            this.index++
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
    private handleTab = (tab: any, index: number) => {
        this.index = 1
        this.type = index
    }
}